<!-- 可拖动悬浮框 -->
<template>
  <movable-area class="movable-area">
    <movable-view v-if="areaData" :disabled="disabled" class="movable-view" :x="x" :y="y" direction="all" inertia="true"
      @change="touchChange">
      <view class="float-btn">
        <!-- <image src="@/static/area/review.png" style="width: 86rpx; height: 8rpx; margin-top: 10rpx"></image> -->
        <view class="areaTitle">区域数据</view>
        <view>
          <view class="rowStyle">
            <image src="@/static/manage/area-village.png" class="rowIcon1"></image>
            <view class="rowContent">
              <view style="color: #5E5E5E;">有终端村庄数</view>
              <view class="rowStatistic">
                <text class="rowNum">{{ statisticData.villageCount }} </text>
                个
              </view>
            </view>
          </view>
          <view class="rowStyle" style="margin: 4rpx 0">
            <view class="rowIcon">
              <image src="@/static/manage/nachang.png" class="rowIcon3"></image>
            </view>
            <view class="rowContent">
              <view class="name">纳场村</view>
              <view class="rowStatistic">
                <text class="rowNum">{{ statisticData.nachangVillageCount }} </text>
                个
              </view>
            </view>
          </view>
          <view class="rowStyle" style="margin: 4rpx 0">
            <view class="rowIcon">
              <image src="@/static/manage/jiebo.png" class="rowIcon4"></image>
            </view>
            <view class="rowContent">
              <view class="name">接驳井</view>
              <view class="rowStatistic">
                <text class="rowNum">{{ statisticData.connectionWellCount }} </text>
                个
              </view>
            </view>
          </view>
          <!-- 终端 -->
          <view class="rowStyle " style=" margin: 12rpx 0 12rpx 0;">
            <image src="@/static/manage/icon-terminal.png" class="rowIcon2"></image>
            <view class="rowContent">
              <view style="color: #5E5E5E;">终端</view>
              <view class="rowStatistic">
                <text class="rowNum">{{ statisticData.terminalCount }} </text>
                个
              </view>
            </view>
          </view>
          <view @click="clickRow('terminal', 1)" class="rowStyle" style="margin: 4rpx 0">
            <view class="rowIcon"></view>
            <view class="rowContent">
              <view class="name">正常</view>
              <view class="rowStatistic">
                <text class="rowNum">{{ statisticData.terminalNormalCount }} </text>
                个
              </view>
            </view>
          </view>
          <view @click="clickRow('terminal', 2)" class="rowStyle" style="margin: 4rpx 0">
            <view class="rowIcon"></view>
            <view class="rowContent">
              <view class="name">异常</view>
              <view class="rowStatistic">
                <text class="rowNum" style="color: #FFC400">{{ statisticData.terminalAbnormalCount }} </text>
                个
              </view>
            </view>
          </view>
          <view @click="clickRow('terminal', 3)" class="rowStyle" style="margin: 4rpx 0">
            <view class="rowIcon"></view>
            <view class="rowContent">
              <view class="name">运行</view>
              <view class="rowStatistic">
                <text class="rowNum" style="color: #74CDAF">{{ statisticData.terminalRunCount }} </text>
                个
              </view>
            </view>
          </view>
          <view @click="clickRow('terminal', 4)" class="rowStyle" style="margin: 4rpx 0">
            <view class="rowIcon"></view>
            <view class="rowContent">
              <view class="name">未运行</view>
              <view class="rowStatistic">
                <text class="rowNum" style="color: #747474">{{ statisticData.terminalNotRunCount }} </text>
                个
              </view>
            </view>
          </view>
          <!-- 设备 -->
          <view class="rowStyle" style=" margin: 12rpx 0 12rpx 0;">
            <image src="@/static/manage/icon-equip.png" class="rowIcon2"></image>
            <view class="rowContent">
              <view style="color: #5E5E5E;">设备</view>
              <view class="rowStatistic">
                <text class="rowNum">{{ statisticData.equipmentCount }} </text>
                个
              </view>
            </view>
          </view>
          <view class="rowStyle" @click="clickRow('device', 2)" style="margin: 4rpx 0">
            <view class="rowIcon"></view>
            <view class="rowContent">
              <view class="name">在线</view>
              <view class="rowStatistic">
                <text class="rowNum">{{ statisticData.equipmentOnlineCount }} </text>
                个
              </view>
            </view>
          </view>
          <view class="rowStyle" @click="clickRow('device', 3)" style="margin: 4rpx 0">
            <view class="rowIcon"></view>
            <view class="rowContent">
              <view class="name">离线</view>
              <view class="rowStatistic">
                <text class="rowNum" style="color: #747474">{{ statisticData.equipmentOfflineCount }} </text>
                个
              </view>
            </view>
          </view>
          <view class="rowStyle" @click="clickRow('device', 1)" style="margin: 4rpx 0">
            <view class="rowIcon"></view>
            <view class="rowContent">
              <view class="name">未激活</view>
              <view class="rowStatistic">
                <text class="rowNum" style="color: #FC8382">{{ statisticData.equipmentNotActiveCount }} </text>
                个
              </view>
            </view>
          </view>
        </view>
      </view>
    </movable-view>
    <!-- <movable-view v-else disabled class="movable-view1" :x="x" :y="y" direction="all" inertia="true" @click="open">
      <view class="float-btn1">
        <image src="@/static/area/area-data.png"></image>
        <view class="areaTitle">区域数据</view>
      </view>
    </movable-view> -->
  </movable-area>
</template>
<script>
// import { mapRegionDataQuery } from '@/api/area';
import { getAreaStatistics } from '@/api/manage'
export default {
  props: {
    // regionId: {
    //   default: '',
    // },
    disabled: {
      type: Boolean,
      default: false
    },
    areaData: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      x: 12,
      y: 750,
      // x: 0,
      // y: 0,
      screenWidth: 0,
      screenHeight: 0,
      statisticData: {
        equipOne: '',
        equipThree: '',
        equipTwo: '',
        terminalOne: '',
        terminalTwo: '',
        village: '',
      },
      // areaData: false,
    };
  },
  watch: {
    areaData: {
      handler: function (val) {
        if (val) {
          this.getAreaStatistics();
        }
      },
      immediate: true
    }
  },
  // 页面加载
  onLoad(e) {
    const res = uni.getSystemInfoSync();
    this.screenWidth = res.windowWidth;
    this.screenHeight = res.windowHeight;
    this.x = this.screenWidth - 100;
    this.y = this.screenHeight - 150;
    // console.log(this.screenWidth, this.screenHeight);
    // console.log(this.x, 'this.x');
    // console.log(this.y, 'this.y');
  },
  // 页面显示
  onShow() { },
  methods: {
    clickRow(type, num) {
      console.log(type, num, 'num--点击区域数据')
      if (type === 'terminal') {
        uni.$emit('terminalStatus', num);
      }
      if (type === 'device') {
        uni.$emit('deviceStatus', num);
      }
    },
    /** 获取首页地图统计面板数据 */
    async getAreaStatistics() {
      const regionId = uni.getStorageSync('regionId')
      console.log(regionId, 'regionId');
      const res = await getAreaStatistics({ areaId: regionId });
      this.statisticData = res.data.data;
    },
    touchChange(event) {
      const res = uni.getWindowInfo();
      this.screenWidth = res.windowWidth;
      this.screenHeight = res.windowHeight;
      // console.log(event.detail, this.screenWidth, this.screenHeight, 'detail');
      const { x, y } = event.detail;
      if (x === 0 && y >= 470) {
        this.areaData = false;
      }
    },
    open() {
      this.areaData = true;
    },
  },
};
</script>
<style scoped lang="scss">
page {
  width: 100vw;
  height: 100%;
}

.movable-area {
  //  可移动的范围
  // height: calc(100vh - 230rpx);
  height: 100vh;
  width: 750rpx;
  top: 0;
  position: fixed;
  pointer-events: none; //鼠标事件可以渗透
}

.movable-view {
  // width: 140rpx; // 按钮大小
  // height: 140rpx;
  width: 360rpx;
  height: 630rpx;
  pointer-events: auto; //恢复鼠标事件
}

.float-btn {
  width: 360rpx;
  height: 630rpx;
  // height: 140rpx;
  // line-height: 140rpx;
  text-align: center;
  // background: #e0241b;
  // box-shadow: 0 3rpx 6rpx 1rpx rgba(224, 36, 27, .3);
  background: #ffffff;
  box-shadow: 0rpx 5rpx 19rpx 1rpx rgba(0, 14, 17, 0.14);
  position: fixed;
  font-size: 24rpx;
  padding-bottom: 18rpx;
  .areaTitle {
    font-weight: bold;
    font-size: 28rpx;
    color: #2769f7;
    line-height: 60rpx;
    border-bottom: 1rpx solid rgba(164, 164, 164, 0.1);
  }
  .rowStyle {
    display: flex;
    align-items: center;
    .rowIcon {
      width: 20rpx;
      height: 20rpx;
      margin: 0 10rpx 0 20rpx;
    }
    .rowIcon1 {
      width: 20rpx;
      height: 17rpx;
      margin: 0 10rpx 0 20rpx;
    }
    .rowIcon2 {
      width: 17rpx;
      height: 17rpx;
      margin: 0 10rpx 0 20rpx;
    }
    .rowIcon3 {
      width: 19rpx;
      height: 18rpx;
      vertical-align: top;
    }
    .rowIcon4 {
      width: 17rpx;
      height: 16rpx;
      vertical-align: top;
    }
    .rowContent {
      width: 80%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .rowStatistic {
        // color: rgba(0, 0, 0, 0.6);
        color: #989898;
        .rowNum {
          font-weight: bold;
          font-size: 30rpx;
          color: #2769f7;
        }
      }
      .name {
        // color: rgba(0, 0, 0, 0.7);
        color: #989898;
        font-size: 24rpx;
      }
    }
  }
}

.movable-view1 {
  // width: 140rpx; // 按钮大小
  // height: 140rpx;
  width: 200rpx;
  height: 69rpx;
  pointer-events: auto; //恢复鼠标事件
}

.float-btn1 {
  width: 200rpx;
  height: 69rpx;
  // height: 140rpx;
  // line-height: 140rpx;
  text-align: center;
  // background: #e0241b;
  // box-shadow: 0 3rpx 6rpx 1rpx rgba(224, 36, 27, .3);
  background: rgba(0, 0, 0, 0.5);
  box-shadow: 0rpx 5rpx 19rpx 1rpx rgba(0, 14, 17, 0.14);
  border-radius: 8rpx;
  position: fixed;
  font-size: 24rpx;
  display: flex;
  .areaTitle {
    font-weight: 500;
    font-size: 28rpx;
    color: #00de7d;
    line-height: 60rpx;
    border-bottom: 1rpx solid rgba(7, 225, 130, 1);
  }
  image {
    width: 30rpx;
    height: 30rpx;
    margin: 14rpx;
  }
}
</style>
